<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>第二题</title>
        <script src = '../work/jquery-1.12.4.min.js'></script>
        <script>
            jQuery(function ($) {
               $('#btn1').click(function () {
                   var chked = this.checked;
                   $(':checkbox').prop({checked:chked});
               })
            });
            //prop 也是控制属性  特殊   checked    selected  disabled     readonly
           /* window.onload=function (){
                var oBtn1=document.getElementById('btn1');
                var aChk=document.getElementsByTagName('input');
                oBtn1.onclick=function (){
                    if(this.checked)
                    {
                        for (var i=0; i<aChk.length; i++)
                            {
                                aChk[i].checked=true;
                            }
                    }
                    else {
                        for (var i=0; i<aChk.length; i++)
                        {
                            aChk[i].checked = false;
                        }
                    }

                };
        };*/
        </script>
    </head>
    <body>
    <div style="padding: 10px;">
        2: 已知页面代码及页面展示效果，完成全选功能
    </div>
    <br/>
    <div style="font-weight: bold">代码示例</div>
    <div style="border: 1px solid #c1bec0;">
            <pre>
              window.onload=function (){
                    var oBtn1=document.getElementById('btn1');
                    var aChk=document.getElementsByTagName('input');
                    oBtn1.onclick=function (){
                        if(this.checked)
                        {
                            for (var i=0; i< aChk.length; i++)
                                {
                                    aChk[i].checked=true;
                                }
                        }
                        else {
                            for (var i=0; i< aChk.length; i++)
                            {
                                aChk[i].checked = false;
                            }
                        }
        
                    };
        };
            </pre>

    </div>
    <br/>
    <div style="font-weight: bold">代码效果</div>
    <div style="border: 1px solid #c1bec0;padding: 10px;">
        <table style = 'text-align:center;width:500px;border-collapse:collapse;border:1px solid #efefef' border = 1>
            <tr>
                <th style = 'width:20%' title = '全选'>全选
                    <input id="btn1" type = 'checkbox' />
                </th>
                <th style = 'width:30%'>姓名</th>
                <th style = 'width:60%'>地址</th>
            </tr>
            <tr>
                <td><input type = 'checkbox' /></td>
                <td>张三</td>
                <td><input type = 'text' /></td>
            </tr>
            <tr>
                <td><input type = 'checkbox' /></td>
                <td>李四</td>
                <td><input type = 'text' /></td>
            </tr>
    </table>
    </div>
    </body>
</html>